<template>
  <div class="service-box knife_container">
    <!-- 退款 -->
    <section class="service-item" v-if="saleType === 0">
      <span class="service-icon"><img src="../../../../images/succeed.png"></span>
      <h2 class="title">申请退款成功</h2>
      <div class="service-content">
        <p class="content-line">您的货品申请退款已提交，24小时内将由客服进行审核</p>
        我们将在<em class="obvious">2～4个工作日内</em>进行退款，若有疑问请致电 <em class="color-blue"> 0576-86999962</em>
      </div>
      <div class="service-order">
        <p class="order"> 退款单号：{{afterId}}</p>
        <p class="order">退款商品：{{goods.goodsName}} {{goods.productName}}</p>
        <p class="order">商品数量：{{leftNumber}}</p>
        <p class="order">退款金额：¥{{(leftNumber * goods.price).toFixed(2)}}</p>
      </div>
      <div class="service-btn">
        <router-link :to="{name: 'orderDetail', params: {orderId: orderId}}" class="btn-pop-yellow" @click="getOddNumber = false">返回订单详情</router-link>
      </div>
    </section>
    <!-- 退货 -->
    <section class="service-item" v-else>
      <span class="service-icon"><img src="../../../../images/succeed.png"></span>
      <h2 class="title">申请退货成功</h2>
      <div class="service-content">
        <p class="content-line">您的货品申请售后已提交，24小时内将由客服进行审核</p>
        <p>客服审核同意后，请将货品按收货地址寄回</p>
        <em class="unclear">若有疑问请致电</em> <em class="color-blue"> 0576-86999962</em>
      </div>
      <div class="service-order" v-show="false">
        <p class="order"> 收货地址：浙江省温岭市九龙大道230号刀</p>
        <p class="order">收件人：温小岭(收)</p>
        <p class="order">联系电话：15078768898</p>
      </div>
      <div class="service-btn">
        <router-link :to="{name: 'orderDetail', params: {orderId: orderId}}" class="btn-pop-yellow " @click="getOddNumber = false">返回订单详情</router-link>
        <!-- <span class="btn-pop-yellow" @click="getOddNumber = true">录入物流单号</span> -->
      </div>
    </section>
    <section class="pop txt-center" v-if="getOddNumber">
      <i class="icon el-icon-circle-close-outline pop-close pointer" @click="getOddNumber = false, writeOdd = true, trackingNumber = ''"></i>
      <div v-if="writeOdd">
        <p class="pop-header txt-center">录入物流单号</p>
        <div class="sale-content odd-box">
          <el-input v-model="trackingNumber" placeholder="请输入物流单号"></el-input>
          <div class="txt-center mar-top20">
            <a class="btn-pop-yellow" :class="{'btn-pop-gray': trackingNumber.length === 0}" @click="writeOdd = false">下一步</a>
          </div>
        </div>
      </div>
       <div v-else>
        <p class="pop-header txt-center">确认物流单号</p>
        <div class="sale-content ">
          <p class="odd-num">{{trackingNumber}}</p>
          <div class="txt-center mar-top20">
            <a class="btn-pop-yellow btn-pop-gray" @click="writeOdd = true">返回重新填写</a>
            <a class="btn-pop-yellow" @click="fetchTrackOrder">确定</a>
          </div>
        </div>
      </div>
    </section>
    <div class="v-modal" tabindex="0" style="z-index: 2006;" v-if="getOddNumber"></div>
  </div>
</template>

<script>
import {Dialog, Input} from 'element-ui'
import {getSession} from '@/config/mUntils'
import {setTrackOrder} from '@/service/get-data'

export default {
  components: {
    elDialog: Dialog,
    elInput: Input
  },
  data () {
    return {
      goods: {},
      getOddNumber: false,
      trackingNumber: '',
      writeOdd: true,
      leftNumber: 0 // 剩余的数量
    }
  },
  computed: {
    orderId () {
      return this.$route.query.orderId
    },
    saleType () {
      return this.$route.query.type
    },
    afterId () {
      return this.$route.query.afterid
    }
  },
  methods: {
    getGoodsObj () {
      let obj = getSession('saleObj')
      this.goods = JSON.parse(obj)
      this.leftNumber = this.goods.number - this.goods.afterSaleNum
    },
    // 填写物流单号
    async fetchTrackOrder () {
      let res = await setTrackOrder(this.goods.id, this.trackingNumber)
      if (res.data && res.data.resultCode === 2000) {
        res = res.data.data
        this.$message({
          message: '物流单号已填写',
          type: 'success'
        })
        this.getOddNumber = false
      } else {
        this.getOddNumber = false
        this.$message({
          message: res.data.resultMsg,
          type: 'error'
        })
      }
    }
  },
  mounted () {
    this.getGoodsObj() // 货品信息
  }
}
</script>

<style lang="scss" scoped>
  .service-box{
    background: #fff;
    margin-top: 44px;
    color: #6b6b6b;
    padding-top: 100px;
    height: 100%;
    padding-bottom: 80px;
    margin-bottom: 40px;
  }
  .service-item{
    text-align: center;
  }
  .service-icon{
    display: inline-block;
    width:80px;
    height:80px;
    margin-bottom: 20px;
    img{
      width:100%;
    }
  }
  .title{
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 28px;
    color:#303030;
  }
  .service-content{
    line-height: 22px;
    margin-bottom: 40px;
    .content-line{
      margin-bottom: 5px;
    }
  }
  .service-order{
    font-size:16px;
    color:rgba(102,102,102,1);
    line-height:22px;
    text-align: left;
    padding-left: 95px;
    width: 450px;
    margin: 0 auto 40px;
    .order{
      margin-bottom: 10px;
    }
  }
  .service-btn{
    margin-top: 20px;
  }
  .obvious{
    color: #303030;
  }
  .unclear{
    color:#BBBBBB;
  }
  .odd-box{
    width: 250px;
    margin: 0 auto;
  }
  .odd-num{
    font-size: 22px;
    line-height: 30px;
    padding: 20px 0;
  }
  // 退货弹窗
  .pop{
    position: relative;
    width: 480px;
    z-index: 2018;
    border-radius: 10px;
    background: #ffffff;
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    .pop-header{
      font-size: 18px;
      color:rgba(48,48,48,1);
      line-height:25px;
      padding: 18px 0;
      border-bottom: 1px dashed #eeeeee;
    }
    .sale-content{
      padding: 20px 20px 30px;
      .title{
        margin-bottom: 30px;
        color: #303030;
        font-size: 16px;
      }
    }
    .sale-order{
      display: inline-block;
      text-align: left;
      color: #303030;
      line-height: 22px;
    }
    .sale-line{
      margin-bottom:8px;
      line-height:20px;
      color: #666666;
    }
  }
  .btn-pop-yellow {
      display: inline-block;
      text-align: center;
      width: 200px;
      height: 50px;
      line-height: 50px;
      color: #303030;
      background: #FFE100;
      cursor: pointer;
      border-radius: 5px;
    }
    .btn-pop-gray{
      background: #E6E6E6;
      color: #bbb;
    }
</style>
